<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>page9</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="../css/swiper.min.css">

  <!-- Demo styles -->
  <style>

p{ height: 100px; background-color: #9fc; text-align: center; 
line-height: 75px; } 
p span{ font-size: 40px; 
	/transition-property: margin;/ 
/transition-duration: 3s;
*/ transition: margin 3s; } 
p:hover span{ margin: 0 
20px; }
    

    .swiper-container {
      width: 100%;
      height: 800px;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: lightblue;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .swiper-slide img{
    	width: 100%;
    	height: 100%;
    }
z{
  font-size: 20px;
  color: #09f;
}
z:hover{
  font-size: 36px;
  color: lightcoral;
}
z a{
  color: #09f ;
}
z a:hover{
   font-size: 20px;
  color: lightcoral;
}
*{
  text-decoration: none;
}
c{
  color:  black;
}
c:hover{
  color: #f06;
}
  
  </style>
</head>
<body>
	<p> <c>
<span>魅</span> <span>力</span> <span>广</span> 
<span>东</span><span>：</span> <span>特</span> 
<span>色</span> <span>小</span> <span>吃</span></c></p>
<marquee width=100% behavior=alternate direction=left align=middle scrollamount=10s><z><a href="https://baike.so.com/doc/5415824-5653969.html">虾饺</a> 
  小年糕 
灌汤包
<a href="https://baike.so.com/doc/6326756-6540364.html">千层糕 </a>
马蹄糕 
萝卜糕 
<a href="https://baike.so.com/doc/5415819-5653964.html">蛋挞</a> 
</z></marquee>

  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="../img2/1.jpg" alt=""></div>
      <div class="swiper-slide"><img src="../img2/10.jpg" alt=""></div>
      <div class="swiper-slide"><img src="../img2/12.jpg" alt=""></div>
      <div class="swiper-slide"><img src="../img2/2.jpg" alt=""></div>
      <div class="swiper-slide"><img src="../img2/18.jpg" alt=""></div>
      <div class="swiper-slide"><img src="../img2/19.jpg" alt=""></div>
      <div class="swiper-slide"><img src="../img2/20.jpg" alt=""></div>
      <div class="swiper-slide"><img src="../img2/21.jpg" alt=""></div>
      <div class="swiper-slide"><img src="../img2/22.jpg" alt=""></div>
      <div class="swiper-slide"><img src="../img2/24.jpg" alt=""></div>
      <div class="swiper-slide"><img src="../img2/3.jpg" alt=""></div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

  <!-- Swiper JS -->
  <script src="../js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
</body>
</html>
